HTMLify

body{
  background-color: #355586;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.d-block{
 border: 2px solid #6c6a6b;
 border-radius: 30px;
 box-shadow: 5px 9px 11px 0px #261212;
}

button {
    border-radius: 4px;
}


#i1{
 width: 680px;
 height: 150px;
 border-radius: 20px;
 opacity: 0.7;
}

#bg1{	
 background-color: #292727;
 overflow: hidden;
}

.whitebg{
	height: 100%;
	width: 3.1rem;
	background-color: #fff;
	vertical-align: top;
	box-shadow: inset -4px -7px 2px 0 #42426e;
	padding-bottom: 0px;
	padding-top: 21%;
	padding-bottom: 3%;
	color: black;
	font-weight: bold;

}

.whitebg:focus{
	background-color: #cec6c6;
}


.blackbg{
	height: 55%;
	width: 2.5rem;
	margin-left: -25px;
	margin-right: -25px;
	background-color: black;
	vertical-align: top;
	position: relative;
	z-index: 2;
	box-shadow: inset -2px -4px 2px 0 #2f2929;
	color: white;
	padding-top: 9%;
	padding-bottom: 2%;
}

.blackbg:focus{
	background-color: #403e3e;
}

#w3,#w7,#w0{
	margin-right: -7px;
}

h5{
	font-family: 'Courgette', cursive;
	color: #94ef1b;
}

#heading1{
	text-align: center;
    font-family: 'Pirata One';
    letter-spacing: 0.3rem;
    font-size: 3.5rem;
    color: #ffb630;
    animation: headanimation 7s linear infinite;;
}

@keyframes headanimation{
	0%{
		color: #20de2e;
	}
	50%{
		color: #cade20;
	}
    70%{
		color: #dc861b;
	}
	100%{
		color: #1ade5f;
	}
}